<template>
	<view>
		<block v-for="(item,index) in order" :key="index" v-if="order.length !== 0">
		<view class="note">
			<text>交易成功</text>
		</view>
		<view class="goods-detail clearfix"  @click="toOrderDetail(index)">
			<view class="left">
				<image :src="item.goodsInfo.imgUrl"
					   mode="aspectFill"
					   class="goods-img"
					   ></image>
			</view>
			<view class="left right-box">
				<view class="xian-detail">
					<text>{{item.goodsInfo.detail}}</text>
				</view>
				<view class="gu-box">
					<text class="gui">{{item.goodsInfo.color}}</text>
					<text class="gui">数量x{{item.num}}</text>
					<text class="gui">{{item.goodsInfo.size}}</text>
				</view>
				<view>
					<text class="small-b">￥</text>
					<text class="big-b">{{item.goodsInfo.money}}</text>
				</view>
			</view>
		</view>
		</block>
		<block v-if="order.length == 0">
			<van-empty image="/static/image/not.png" description="暂无订单" class="ff" />
		</block>
	</view>
</template>

<script>
	import { mapGetters, mapState } from 'vuex'
	export default {
		data() {
			return {
				order: [],
				title: ''
			};
		},
		props: {
			isActive: {
				type: String,
				required: true,
				default: 'allOrder'
			}
		},
		computed: {
			...mapGetters(['getwaitShou'])
		},
		methods: {
			toOrderDetail(index) {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?id='+this.order[index]._id
				})
			}
		},
		created() {
			this.order = this.getwaitShou;
		}
	}
	
</script>

<style lang="scss" scoped>
	
	.note {
		width: $uni-width;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 80rpx;
		line-height: 80rpx;
		color: #7f7f7f;
		font-size: 26rpx;
		border-bottom: 1rpx solid #ddd;
	}
	.goods-detail {
		width: $uni-width;
		height: 240rpx;
		margin-top: 10rpx;
		padding: 20rpx;
		background-color: white;
		box-sizing: border-box;
		padding-bottom: 30rpx;
		border-bottom: 12rpx solid #f5f5f9;
		.goods-img {
			width: 160rpx;
			height: 170rpx;
		}
		.right-box {
			margin-left: 20rpx;
			width: 520rpx;
		}
		.gu-box {
			margin: 10rpx 0;
			color: #8c949d;
			font-size: 28rpx;
			.gui {
				margin-right: 10rpx;
			}
		}
		.small-b {
			font-size: 24rpx;
		}
		.big-b {
			font-size: 32rpx;
			font-weight: 500;
		}
		
	}
	.xian-detail {
		width: 540rpx;
		height: 100rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
